import { h, fragment } from '@knno/dom/jsx';
import { Mutable } from '../../../dist/jsx/mutable';
import { Button } from '../../../dist/jsx/button';
import { Radio } from '../../../dist/jsx/radio';
import { Group, UIGroup } from '../../../dist/jsx/group';
import { Input } from '../../../dist/jsx/input';

export function ShowChangable() {
	let mutable: Mutable;
	let group: UIGroup;
	return (
		<>
			<h2>演示可变组件</h2>

			<Group ref={(g) => (group = g)} value={['1']}>
				<Radio value="1">选项1</Radio>
				<Radio value="2">选项2</Radio>
			</Group>

			<Mutable
				style={{ backgroundColor: 'red' }}
				ref={(m) => {
					mutable = m;
					group.on('change', m.refresh.bind(m));
				}}
				render={() => {
					if (group.value().find((v) => v === '2')) {
						return (
							<>
								<div>
									<Input />
								</div>
								<Button>选择了选项2</Button>
							</>
						);
					} else {
						return (
							<>
								<p>设置多个段落</p>
								<div>选择了选项1</div>
								<Input type="date" />
							</>
						);
					}
				}}
			/>
			<div>第一个可变组件的下方</div>
			<Mutable
				render={() => {
					if (group.value().find((v) => v === '2')) {
						return <p>您选择了2</p>;
					} else {
						return <p>您选择了1</p>;
					}
				}}
				ref={(m) => mutable.on('change', m.refresh.bind(m))}
			/>
		</>
	);
}
